<template>
	<view class="page">
		<u-notify message="Hi uView" :show="show"></u-notify>
		
		<view class="p-10 bg-fff border-radius-5" v-if="data">
			<view class="flex">
				<image class="topLogo" src="/static/image/demo_product.png"></image>
				<view class="margin-left-10 flex-1 ">
					<view class="bold lineNum-1 ">{{data.packageName}}</view>
					<view class="size-10 color-999 lineNum-1">{{data.packageDescription}}</view>
					<view class="color-FF0000">
						<view class="inline-block">￥</view>
						<view class="bold inline-block">{{data.packagePrice}}</view>
						<view class="inline-block">元</view>
					</view>
					
				</view>
			</view>
		</view>
		
		<view class="margin-top-15 p-10 bg-fff border-radius-5" v-if="groupList && groupList.length >0" >
			<!-- 固定分组 -->
			<view class="group_item" v-for="(item, index) in groupList" :key="index">
				<view class="group_name">{{item.groupName + (item.type == 2 ? ('（限购' + item.maxAmount + '份）') : '')}}</view>
				<view class="flex mb-10" v-for="(item1, index1) in item.productList" :key="index1">
					<image class="topLogo" src="/static/image/demo_product.png"></image>
					<view class="margin-left-10 flex-1 ">
						<view class="bold lineNum-1 ">{{item1.name}}</view>
						<view class="size-10 color-999 lineNum-1 ">{{item1.description}}</view>
						<view class="flex justify-content-between" :class="item1.description ? '': 'margin-top-15'">
							<view class="color-FF0000 flex-1">
								<view class="inline-block">￥</view>
								<view class="bold inline-block">{{item1.price}}</view>
								<view class="inline-block">元</view>
							</view>
							<view class="flex-1 text-right color-333" v-if="item.type == 1">
								x {{item1.amount}}
							</view>
							<view class="flex-1 text-right color-333" style="height: 26px; line-height: 26px;" v-else>
								<view class="opt_btn inline-block margin-right-10" @click="minusAmount(item, item1)"> - </view>
								<view class="inline-block margin-right-10" style="width: 20px;text-align: center;">{{item1.amount}}</view>
								<view class="opt_btn inline-block" @click="addAmount(item, item1)"> + </view>
							</view>
						</view>
						
					</view>
				</view>
				
				<!-- <view class="flex mb-10">
					<image class="topLogo" src="/static/image/demo_product.png"></image>
					<view class="margin-left-10 flex-1 ">
						<view class="bold lineNum-1 ">商品2</view>
						<view class="size-10 color-999 lineNum-1 "></view>
						<view class="flex justify-content-between mt-15">
							<view class="color-FF0000 flex-1">
								<view class="inline-block">￥</view>
								<view class="bold inline-block">143</view>
								<view class="inline-block">元</view>
							</view>
							<view class="flex-1 text-right color-333">
								x 2
							</view>
						</view>
					</view>
				</view> -->
			</view>
			
			<!-- 可选分组 -->
			<!-- <view class="group_item">
				<view class="group_name">可选分组1(限购5份）</view>
				<view class="flex mb-10">
					<image class="topLogo" src="/static/image/demo_product.png"></image>
					<view class="margin-left-10 flex-1 ">
						<view class="bold lineNum-1 ">商品1</view>
						<view class="size-10 color-999 lineNum-1 ">商品1的描述</view>
						<view class="flex justify-content-between">
							<view class="color-FF0000 flex-1">
								<view class="inline-block">￥</view>
								<view class="bold inline-block">143</view>
								<view class="inline-block">元</view>
							</view>
							<view class="flex-1 text-right color-333" style="height: 26px; line-height: 26px;">
								<view class="opt_btn inline-block margin-right-10"> - </view>
								<view class="inline-block margin-right-10" style="width: 20px;text-align: center;"> 1 </view>
								<view class="opt_btn inline-block"> + </view>
							</view>
						</view>
						
					</view>
				</view>
			</view> -->
			
		</view>
		
		<view style="height: 80px;width: 100%;"></view>
		
		<view class="bottom_info flex justify-content-between ">
			<view class="flex-1"></view>
			<view class="flex-1" style="height: 50px;line-height: 50px;">
				<view class="inline-block">合计：</view>
				<view class="inline-block color-FF0000 ">￥143</view>
				<view class="submit_bth" @click="submitForm">立即购买</view>
			</view>
		</view>
	</view>
	
</template>

<script>
	export default {
		data() {
			return {
				title: '',
				data: null,
				groupList: [],
				show:true
			}
		},
		onLoad() {
			
			this.getData();
		},
		computed:{
			getGroupBuyAmount(){
				return function(group){
					let productList = group.productList;
					let allAmount = 0;
					if(productList && productList.length >0){
						for(let i in productList){
							allAmount += productList[i].amount;
						}
					}
					console.log('allAmount', allAmount);
					return allAmount;
				}
			}
		},
		methods: {
			addAmount(group, product){
				let maxAmount = group.maxAmount;
				let singleMore = group.singleMore;
				let buyAmount = group.buyAmount;
				let currentAmount = product.amount;
				if(maxAmount <= buyAmount){
					return;
				}
				if(!singleMore && currentAmount > 0){
					uni.showToast({
						title: '当前商品最多只能选1分',
						icon: 'none'
					});
					return;
				}
				product.amount = product.amount + 1;
				group.buyAmount = this.getGroupBuyAmount(group);
			},
			minusAmount(group, product){
				let maxAmount = group.maxAmount;
				let singleMore = group.singleMore;
				let buyAmount = group.buyAmount;
				let currentAmount = product.amount;
				if(currentAmount <= 0){
					product.amount= 0;
					return;
				}
				product.amount = product.amount - 1;
				group.buyAmount = this.getGroupBuyAmount(group);
			},
			
			getData(){
				this.data = {
					packageName:'这是商品的套餐名称这是商品的套餐名称这是商品的套餐名称这是商品的套餐名称这是商品的套餐名称',
					packageDescription:'套餐的描述套餐的描述套餐的描述套餐的描述套餐的描述套餐的描述套餐的描述套餐的描述套餐的描述',
					packagePrice:143
				}
				this.groupList = [
					{
						type:1,
						groupName:'固定分组1',
						productList:[
							{
								id:1,
								name:'商品1',
								description:'商品描述商品描述商品描述商品描述',
								price:10,
								amount:1
							},
							{
								id:2,
								name:'商品2',
								description:'',
								price:20,
								amount:1
							}
						]
					},
					{
						type:2,
						groupName:'可选分组1同一商品可点多份',
						maxAmount:5,//限购分数
						singleMore:1,//同一商品可点多份：1是 0否
						buyAmount:0,
						productList:[
							{
								id:3,
								name:'商品3',
								description:'商品描述商品描述商品描述商品描述',
								price:30,
								amount:0
							},
							{
								id:4,
								name:'商品2',
								description:'',
								price:40,
								amount:0
							}
						]
					},
					{
						type:2,
						groupName:'可选分组2',
						maxAmount:3,//限购分数
						singleMore:0,//同一商品可点多份：1是 0否
						buyAmount:0,
						productList:[
							{
								id:5,
								name:'商品5',
								description:'商品描述商品描述商品描述商品描述',
								price:50,
								amount:0
							},
							{
								id:6,
								name:'商品6',
								description:'',
								price:60,
								amount:0
							},
							{
								id:7,
								name:'商品7',
								description:'商品描述商品描述商品描述商品描述',
								price:70,
								amount:0
							},
							{
								id:8,
								name:'商品8',
								description:'',
								price:80,
								amount:0
							}
						]
					}
				]
			},
			submitForm(){
				//判断限购份数是否满足
				let flag = true;
				if(this.groupList && this.groupList.length > 0){
					for(let i in this.groupList){
						let group = this.groupList[i];
						let type = group.type;
						if(type == 2){
							let maxAmount = group.maxAmount;
							let buyAmount = this.getGroupBuyAmount(group);
							if(maxAmount != buyAmount){
								flag = false
							}
						}
					}
				}
				if(!flag){
					uni.showToast({
						title: '选购数量不足',
						icon: 'none'
					});
					return;
				}
				uni.showToast({
					title: '提交成功',
					icon: 'success'
				});
			},
		
		}
	}
</script>

<style>
	.topLogo {
		height: 120rpx;
		width: 120rpx;
		border-radius: 5px;;
	}
	.group_item{
		
	}
	.group_name{
		font-weight: 500;
	}
	.opt_btn{
		border-radius: 2px;
		height: 26px;
		line-height: 26px;
		
		background: #eeeeee;
		width: 30px;
		text-align: center;
	}
	.bottom_info{
		position: fixed;
		width: 100%;
		height: 50px;
		left: 0px; 
		bottom: 0px;
		background-color: #fff;
		border-top: 1px solid #eee;
		box-shadow: 2px 2px 2px #eee;
	}
	.submit_bth{
		margin-left: 15px;
		width: 100px;
		height: 36px;
		line-height: 36px;
		background-color: #FF0000;
		color:#fff;
		border-radius: 25px;
		text-align: center;
		display: inline-block;
	}
	.border-radius-5{
		border-radius: 5px;
	}
</style>
